---
layout: default
algolia_priority: 0.9
eleventyComputed:
  noindex: "{{ paged.index > 0 }}"
---
<div class="landing-page">
  {# Hero starts #}
  <header class="region bg-mid-bg author-profile">
    <div class="wrapper">
      <div class="headline">
        <div class="switcher flex-align-center author-profile__name">
          {% if paged.data.hero and showHero %}
            {% if imageType == 'round' %}
              <div class="avatar gap-inline-auto" data-size="medium">
                {% Img
                  src=paged.data.hero,
                  alt=renderData.title or title,
                  height="120",
                  width="120",
                  fetchpriority="high"
                %}
              </div>
            {% else %}
              {% Img
                src=paged.data.hero,
                alt=renderData.title or title,
                height="120",
                width="120",
                fetchpriority="high"
              %}
            {% endif %}
          {% endif %}
          <div class="flow">
            <h1 class="headline__title">{{ renderData.title or title }}</h1>
            <p>{{ renderData.description | md | safe or description | md | safe }}</p>
          </div>
        </div>

        <div class="author-profile__detail">
          {% from 'macros/icon.njk' import icon, svg with context %}
          <div class="cluster author-profile__socials flex-justify-left">
            {% if paged.homepage %}
              <a href="{{ paged.homepage }}" target="_blank">
                {{ icon('language') }}
              </a>
            {% endif %}
            {% if paged.linkedin %}
              <a href="{{ paged.linkedin }}" target="_blank">
                {{ icon('linkedin') }}
              </a>
            {% endif %}
            {% if paged.mastodon %}
              <a href="{{ paged.mastodon }}" target="_blank">
                {{ icon('mastodon') }}
              </a>
            {% endif %}
            {% if paged.dcc %}
              <a href="https://developer.chrome.com/authors/{{ paged.dcc }}" target="_blank">
                {{ icon('dcc') }}
              </a>
            {% endif %}
            {% if paged.github %}
              <a href="https://github.com/{{ paged.github }}" target="_blank">
                {{ icon('github') }}
              </a>
            {% endif %}
            {% if paged.glitch %}
              <a href="https://glitch.com/@{{ paged.glitch }}" target="_blank">
                {{ icon('glitch') }}
              </a>
            {% endif %}
            {% if paged.twitter %}
              <a href="https://twitter.com/{{ paged.twitter }}" target="_blank">
                {{ icon('twitter') }}
              </a>
            {% endif %}
            {% if renderData.rss %}
              <a href="{{ renderData.rss }}" target="_blank">
                {{ icon('rss') }}
              </a>
            {% endif %}
          </div>

          {% macro renderBio(bio) %}
            {% if bio is string %}
              <p class="gap-top-size-1">{{ bio }}</p>
            {% else %}
              {% for paragraph in bio %}
                <p class="gap-top-size-1">{{ paragraph }}</p>
              {% endfor %}
            {% endif %}
          {% endmacro %}

          {% set bio = renderData.bio | i18n(locale, true) %}
          {% if bio %}
            {% Details %}
            {% DetailsSummary %} Bio {% endDetailsSummary %}
              {{ renderBio(bio) }}
            {% endDetails %}

            <div class="author-profile__bio"> {{ renderBio(bio) }} </div>
          {% endif %}
        </div>
      </div>
    </div>
  </header>
  {# Hero ends #}

  {% include 'partials/paged.njk' %}

  {% if path %}
    <div class="region">
      <div class="wrapper">
        <div class="cluster flex-justify-center">
          <a class="button" href="/{{path}}">
            {{ ('i18n.paths.'+path+'.see_more') | i18n(locale) }}
          </a>
        </div>
      </div>
    </div>
  {% endif %}

  <div class="docked-actions flow flow-space-base">
    <div>
      {% include 'partials/subscribe-action.njk' %}
    </div>
  </div>
</div>
